<!doctype html>
<html lang="cs" class="no-js">
<head>
  <meta charset="utf-8">
  <!--[if IE]><![endif]-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="css/screen.css">
  <link rel="stylesheet" media="handheld" href="css/handheld.css">
  <script src="js/modernizr-1.5.min.js"></script>
</head>
<!--[if lt IE 7 ]>    <body class="ie8 ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
  <div id="page">

    <h1>My default stylesheet</h1>

    <h1>First level heading</h1>
    <h2>Second level heading</h2>
    <h3>Third level heading</h3>
    <h4>Fourth level heading</h4>
    <h5>Fifth level heading</h5>
    <h6>Sixth level heading</h6>


    <h2>Paragraphs and links</h2>

    <p>Lorem <a href="http://www.google.com">google</a> adipiscing <a href="#">Visited link</a> Quisque ipsum Maecenas Vivamus. <strong>Cursus Curabitur a ridiculus</strong> libero <em>pellentesque sem est tempor</em> id pellentesque. Tristique ante wisi aliquet consequat orci Praesent consequat tellus platea nibh. Curabitur parturient dui at sed neque enim Nam Sed justo vitae. Urna Curabitur porta mattis interdum Curabitur auctor tortor convallis.</p>
    <p>Lorem <a href="http://www.google.com">google</a> adipiscing <a href="#">Visited link</a> Quisque ipsum Maecenas Vivamus. <strong>Cursus Curabitur a ridiculus</strong> libero <em>pellentesque sem est tempor</em> id pellentesque. Tristique ante wisi aliquet consequat orci Praesent consequat tellus platea nibh. Curabitur parturient dui at sed neque enim Nam Sed justo vitae. Urna Curabitur porta mattis interdum Curabitur auctor tortor convallis.</p>

    <h2>Images</h2>

    <h3>Images without links</h3>

    <img src="img/image.jpg" alt="image" width="160" height="125" />

    <p>
      <img src="img/image.jpg" alt="image" class="right" width="160" height="125" />
      Lorem <a href="#">ipsum dolor sit amet consectetuer</a> adipiscing <a href="#">Visited link</a> Quisque ipsum Maecenas Vivamus. <strong>Cursus Curabitur a ridiculus</strong> libero <em>pellentesque sem est tempor</em> id pellentesque. Tristique ante wisi aliquet consequat orci Praesent consequat tellus platea nibh. Curabitur parturient dui at sed neque enim Nam Sed justo vitae. Urna Curabitur porta mattis interdum Curabitur auctor tortor convallis.</p>

    <p>
      <img src="img/image.jpg" alt="image" class="left" width="160" height="125" />
      Tempus et tellus platea tellus odio consequat pretium massa et sociis. Senectus et laoreet fermentum est condimentum dapibus ut Lorem pretium pretium. Pulvinar aliquet tortor id pede nibh mauris sit dui ante urna. Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet. Egestas Nullam convallis Fusce Nulla leo dictum tellus Cras felis massa. Nisl laoreet mauris eget a eleifend Phasellus malesuada vitae Pellentesque leo. Nibh Sed enim.</p>

    <hr />

    <h3>Images with links</h3>

    <p><a href="#"><img src="img/image.jpg" alt="submenu" class="left" width="160" height="125" /></a>
    Tempus et tellus platea tellus odio consequat pretium massa et sociis. Senectus et laoreet fermentum est      condimentum dapibus ut Lorem pretium pretium.<br />
    Pulvinar aliquet tortor id pede nibh mauris sit dui ante urna. <br />
    <a href="#"><img src="img/image.jpg" alt="image" class="right" width="160" height="125" /></a>
    Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet. Egestas Nullam convallis Fusce Nulla leo dictum tellus Cras felis massa. Nisl laoreet mauris eget a eleifend Phasellus malesuada vitae Pellentesque leo. Nibh Sed enim.</p>

    <hr />

    <h3>Images with description</h3>

    <div class="figure" style="width: 162px;">
      <a href="#"><img src="img/image.jpg" alt="image" width="160" height="125" /></a>
      <p>Figure - description</p>
    </div>

    <div class="figure left" style="width: 162px;">
      <a href="#"><img src="img/image.jpg" alt="image" width="160" height="125" /></a>
      <p>Figure - image with long description image with long description image with long description</p>
    </div>

    <div class="figure right" style="width: 162px;">
      <a href="#"><img src="img/image.jpg" alt="image" width="160" height="125" /></a>
      <p>Figure - image with description</p>
    </div>

    <hr />


    <h2>Lists</h2>

    <h3>Unordered list</h3>

    <ul>
      <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
      <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.
        <ul>
          <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
          <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.
            <ul>
              <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
              <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
              <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
            </ul>
          </li>
          <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
        </ul>
      </li>
      <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
    </ul>

    <h3>Ordered list</h3>

    <ol>
      <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
      <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.
        <ol>
          <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
          <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.
            <ol>
              <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
              <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
              <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
            </ol>
          </li>
          <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
        </ol>
      </li>
      <li>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</li>
    </ol>

    <h3>Definition list</h3>

    <dl>
      <dt>7.&nbsp;5.&nbsp;2009</dt>
        <dd>Počátek práce na Default CSS</dd>
      <dt>14. 7. 2009</dt>
        <dd>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</dd>
      <dt>29. 12. 2010</dt>
        <dd>Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium. Sed sed mauris nibh nibh tellus facilisi eros tortor aliquet aliquet. Pellentesque morbi tempor Nunc vitae pretium.</dd>
    </dl>

    <h2>Tables</h2>

    <h3>Small table</h3>

    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>jméno</th>
          <th>příjmení</th>
          <th>pozice</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Celkem:</th>
          <td colspan="3">4</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th>0</th>
          <td>Tomáš</td>
          <td>Procházka</td>
          <td>programátor</td>
        </tr>
        <tr>
          <th>1</th>
          <td>Dmitrij</td>
          <td>Dudnik</td>
          <td>kodér</td>
        </tr>
        <tr>
          <th>2</th>
          <td>Filip</td>
          <td>Šubr</td>
          <td>programátor</td>
        </tr>
        <tr>
          <th>3</th>
          <td>Jan</td>
          <td>Panschab</td>
          <td>kodér</td>
        </tr>
      </tbody>
    </table>

    <h3>Large table</h3>

    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>jméno</th>
          <th>příjmení</th>
          <th>pozice</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Celkem:</th>
          <td colspan="3">4</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th>0</th>
          <td>Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet. Egestas Nullam convallis Fusce Nulla leo dictum tellus Cras felis massa. Nisl laoreet mauris eget a eleifend Phasellus malesuada vitae Pellentesque leo. Nibh Sed enim.</td>
          <td>Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet. Egestas Nullam convallis Fusce Nulla leo dictum tellus Cras felis massa. Nisl laoreet mauris eget a eleifend Phasellus malesuada vitae Pellentesque leo. Nibh Sed enim.</td>
          <td>Nibh Sed enim.</td>
        </tr>
        <tr>
          <th>1</th>
          <td>Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet. Egestas Nullam convallis Fusce Nulla leo dictum tellus Cras felis massa. Nisl laoreet mauris eget a eleifend Phasellus malesuada vitae Pellentesque leo. Nibh Sed enim.</td>
          <td>Wisi</td>
          <td>Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet. Egestas Nullam convallis Fusce Nulla leo dictum tellus Cras felis massa. Nisl laoreet mauris eget a eleifend Phasellus malesuada vitae Pellentesque leo. Nibh Sed enim.</td>
        </tr>
      </tbody>
    </table>

    <h2>Form</h2>

    <h3>Two columns form</h3>

    <form action="#" method="get">
      <fieldset>
        <legend><span>All inputs</span></legend>
        <p>Wisi hendrerit nibh pretium laoreet sodales id facilisi et ac laoreet.</p>
        <p>
          <label for="name">Name:</label>
          <input type="text" id="name" class="text" />

        </p>
        <p>
          <label for="surname">Surname:</label>
          <input type="text" id="surname" class="text" />
        </p>
        <p>
          <label for="email">E-mail:</label>
          <input type="text" id="email" class="text" />
        </p>
        <p>
          <label for="password">Password:</label>
          <input type="password" id="password" class="text" />
        </p>
        <p>
          <label for="file">File:</label>
          <input type="file" id="file" class="file" />
        </p>

        <fieldset class="list">
          <legend><span>Radio buttons:</span></legend>
          <p>
            <input type="radio" name="radio" id="radio1" class="radio" />
            <label for="radio1">radio 1</label>
          </p>
          <p>
            <input type="radio" name="radio" id="radio2" class="radio" />
            <label for="radio2">radio 2</label>
          </p>
          <p>
            <input type="radio" name="radio" id="radio3" class="radio" />
            <label for="radio3">radio 3</label>
          </p>
        </fieldset>

        <fieldset class="line">
          <legend><span>Checkboxes:</span></legend>
          <p>
            <input type="checkbox" name="checkbox" id="checkbox1" class="checkbox" />
            <label for="checkbox1">checkbox 1</label>
          </p>
          <p>
            <input type="checkbox" name="checkbox" id="checkbox2" class="checkbox" />
            <label for="checkbox2">checkbox 2</label>
          </p>
          <p>
            <input type="checkbox" name="checkbox" id="checkbox3" class="checkbox" />
            <label for="checkbox3">checkbox 3</label>
          </p>
        </fieldset>

        <p>
          <label for="select">Select:</label>
          <select name="select" id="select">
            <option value="select1">select option 1</option>
            <option value="select2">select 2</option>
            <option value="select3">select 3</option>
          </select>
        </p>

        <p>
            <label for="area" class="top">Message:</label>
          <textarea id="area" cols="80" rows="10"></textarea>
        </p>
        <p class="no-label">
          <input type="submit" value="Submit" class="submit" />
        </p>
      </fieldset>
    </form>

    <h3>One column form</h3>

    <form action="#" method="get">
      <fieldset class="one-col">
        <legend><span>All inputs in one column</span></legend>
        <p>
          <label for="name2">Name:</label>
          <input type="text" id="name2" />

        </p>
        <p>
          <label for="surname2">Surname:</label>
          <input type="text" id="surname2" />
        </p>
        <p>
          <label for="email2">E-mail:</label>
          <input type="text" id="email2" />
        </p>
        <p>
          <label for="password2">Password:</label>
          <input type="password" id="password2" />
        </p>
        <p>
          <label for="file2">File:</label>
          <input type="file" id="file2" />
        </p>

        <fieldset class="list">
          <legend><span>Radio buttons:</span></legend>
          <p>
            <input type="radio" name="radio2" id="radio12" />
            <label for="radio12">radio 1</label>
          </p>
          <p>
            <input type="radio" name="radio2" id="radio22" />
            <label for="radio22">radio 2</label>
          </p>
          <p>
            <input type="radio" name="radio2" id="radio32" />
            <label for="radio32">radio 3</label>
          </p>
        </fieldset>

        <fieldset class="line">
          <legend><span>Checkboxes:</span></legend>
          <p>
            <input type="checkbox" name="checkbox2" id="checkbox12" />
            <label for="checkbox12">checkbox 1</label>
          </p>
          <p>
            <input type="checkbox" name="checkbox2" id="checkbox22" />
            <label for="checkbox22">checkbox 2</label>
          </p>
          <p>
            <input type="checkbox" name="checkbox2" id="checkbox32" />
            <label for="checkbox32">checkbox 3</label>
          </p>
        </fieldset>

        <p>
          <label for="select2">Select:</label>
          <select name="select2" id="select2">
            <option value="select1">select option 1</option>
            <option value="select2">select 2</option>
            <option value="select3">select 3</option>
          </select>
        </p>

        <p class="one-col">
          <label for="area2">Message:</label>
          <textarea id="area2" cols="80" rows="10"></textarea>
        </p>
        <p class="no-label">
          <input type="submit" value="Submit" />
        </p>
      </fieldset>
    </form>

  </div><!-- // #page -->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
  <script src="js/core.js"></script>

</body>
</html>
